<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>javascript基础 | web前端面试题集锦</title>
  <meta name="keywords" content=" javascript ">
  <meta name="description" content="javascript基础 | web前端面试题集锦">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="categories">
<meta property="og:url" content="http://blog.duans.top/categories/index.html">
<meta property="og:site_name" content="web前端面试题集锦">
<meta property="og:locale" content="zh">
<meta property="article:published_time" content="2020-03-25T03:44:47.000Z">
<meta property="article:modified_time" content="2020-03-25T03:45:03.696Z">
<meta property="article:author" content="duans">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/github.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="true">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>duans</span>
</div>

<div class="icon">
    
        
        <a title="oschina" href="https://gitee.com/duans" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
        <a title="jianshu" href="https://www.jianshu.com/u/6345254fa137" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-jianshu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/duanshaobo" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="email" href="mailto:duanshaobo@126.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(22)</small></div></li>
    
        
            
            <li><div data-rel="web前端"><i class="fold iconfont icon-right"></i>web前端<small>(16)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="前端面试题">前端面试题<small>(16)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web服务器">web服务器<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="数据库">数据库<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web后端">web后端<small>(2)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="22">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="https://www.duans.top/">duans</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode === 13){return false;}">
        <input id="local-search-input" class="search" type="text" placeholder="Search..." />
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">react</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">minapp</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">javascript</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">angular</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">mongodb</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jquery</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">mysql</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">apache</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">webapi</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">性能优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">ajax</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">html5</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">css3</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es6</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es7</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es8</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">代码分析</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">js基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">构建工具</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">混合app</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">混合开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">webSocket</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a  class="web后端 "
           href="/2020/03/24/server/nodejs/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="nodejs">nodejs</span>
            <span class="post-date" title="2020-03-24 15:40:21">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/angular/"
           data-tag="angular"
           data-author="" >
            <span class="post-title" title="angular">angular</span>
            <span class="post-date" title="2020-03-24 11:56:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/javascript/"
           data-tag="javascript"
           data-author="" >
            <span class="post-title" title="javascript基础">javascript基础</span>
            <span class="post-date" title="2020-03-24 11:43:12">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/jquery/"
           data-tag="jquery"
           data-author="" >
            <span class="post-title" title="jquery">jquery</span>
            <span class="post-date" title="2020-03-24 11:44:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/minapp/"
           data-tag="minapp"
           data-author="" >
            <span class="post-title" title="微信小程序">微信小程序</span>
            <span class="post-date" title="2020-03-24 11:00:34">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/react/"
           data-tag="react"
           data-author="" >
            <span class="post-title" title="react">react</span>
            <span class="post-date" title="2020-03-24 10:58:53">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/vue/"
           data-tag="vue"
           data-author="" >
            <span class="post-title" title="vue">vue</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/websocket/"
           data-tag="webSocket"
           data-author="" >
            <span class="post-title" title="webSocket">webSocket</span>
            <span class="post-date" title="2020-03-24 13:17:01">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/web-base/"
           data-tag="前端基础"
           data-author="" >
            <span class="post-title" title="web前端基础">web前端基础</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web后端 "
           href="/2020/03/24/server/php/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="php">php</span>
            <span class="post-date" title="2020-03-24 15:42:33">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/nginx/"
           data-tag="nginx"
           data-author="" >
            <span class="post-title" title="nginx">nginx</span>
            <span class="post-date" title="2020-03-24 15:43:15">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/apache/"
           data-tag="apache"
           data-author="" >
            <span class="post-title" title="apache">apache</span>
            <span class="post-date" title="2020-03-24 15:43:29">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mysql/"
           data-tag="mysql"
           data-author="" >
            <span class="post-title" title="mysql">mysql</span>
            <span class="post-date" title="2020-03-24 15:46:19">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mongodb/"
           data-tag="mongodb"
           data-author="" >
            <span class="post-title" title="mongodb">mongodb</span>
            <span class="post-date" title="2020-03-24 15:46:36">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/webapi/"
           data-tag="webapi"
           data-author="" >
            <span class="post-title" title="webapi">webapi</span>
            <span class="post-date" title="2020-03-25 14:41:05">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/optimize/"
           data-tag="性能优化"
           data-author="" >
            <span class="post-title" title="前端性能优化">前端性能优化</span>
            <span class="post-date" title="2020-03-25 15:35:20">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/ajax/"
           data-tag="ajax"
           data-author="" >
            <span class="post-title" title="ajax数据交互">ajax数据交互</span>
            <span class="post-date" title="2020-03-25 15:40:58">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/h5c3/"
           data-tag="html5,css3"
           data-author="" >
            <span class="post-title" title="h5c3新特性">h5c3新特性</span>
            <span class="post-date" title="2020-03-25 15:50:04">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/es678/"
           data-tag="es6,es7,es8"
           data-author="" >
            <span class="post-title" title="ES6/7/8">ES6/7/8</span>
            <span class="post-date" title="2020-03-25 15:57:17">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/analysis/"
           data-tag="代码分析,js基础"
           data-author="" >
            <span class="post-title" title="js代码分析">js代码分析</span>
            <span class="post-date" title="2020-03-25 16:22:27">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/devtools/"
           data-tag="构建工具"
           data-author="" >
            <span class="post-title" title="前端构建工具">前端构建工具</span>
            <span class="post-date" title="2020-03-25 16:39:16">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/hybird/"
           data-tag="混合app,混合开发"
           data-author="" >
            <span class="post-title" title="混合开发">混合开发</span>
            <span class="post-date" title="2020-03-25 16:57:29">2020/03/25</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-client/javascript" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">javascript基础</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="web前端">web前端</a>/
            
                <a  data-rel="前端面试题">前端面试题</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color1">javascript</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-03-25 16:21:38'>2020-03-24 11:43</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#js中有哪些数据类型"><span class="toc-text">js中有哪些数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#typeof-typeof-和instanceof-的区别"><span class="toc-text">typeof(typeof()) 和instanceof 的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#怎么判断两个对象相等"><span class="toc-text">怎么判断两个对象相等?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js中函数有哪些定义方式"><span class="toc-text">js中函数有哪些定义方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js中函数有哪些调用形式"><span class="toc-text">js中函数有哪些调用形式?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#“-”-和-“-”-的区别？"><span class="toc-text">“&#x3D;&#x3D;” 和 “&#x3D;&#x3D;&#x3D;” 的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js中的常用内置对象有哪些？并列举该对象的常用方法？"><span class="toc-text">js中的常用内置对象有哪些？并列举该对象的常用方法？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#列举和数组操作相关的方法"><span class="toc-text">列举和数组操作相关的方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#列举和字符串操相关的方法"><span class="toc-text">列举和字符串操相关的方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#document-write和-innerHTML的区别"><span class="toc-text">document.write和 innerHTML的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#分别阐述split-slice-splice-join-？"><span class="toc-text">分别阐述split(), slice(), splice(), join()？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#例举-3-中强制类型转换和-2-中隐式类型转换？"><span class="toc-text">例举 3 中强制类型转换和 2 中隐式类型转换？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何判断一个变量foo是数组"><span class="toc-text">如何判断一个变量foo是数组?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是原型对象"><span class="toc-text">什么是原型对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是原型链"><span class="toc-text">什么是原型链?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是构造函数"><span class="toc-text">什么是构造函数?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js中实现继承的方式"><span class="toc-text">js中实现继承的方式?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是闭包-有什么作用-使用的时候需要注意什么"><span class="toc-text">什么是闭包, 有什么作用, 使用的时候需要注意什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是内存泄漏-那些操作会引起内存泄漏"><span class="toc-text">什么是内存泄漏, 那些操作会引起内存泄漏?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是预解析"><span class="toc-text">什么是预解析?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#说说你对this关键字的理解"><span class="toc-text">说说你对this关键字的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#call-apply-bind的区别"><span class="toc-text">call&#x2F;apply&#x2F;bind的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#caller和callee的区别是什么"><span class="toc-text">caller和callee的区别是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new操作符具体干了什么呢"><span class="toc-text">new操作符具体干了什么呢?</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="js中有哪些数据类型"><a href="#js中有哪些数据类型" class="headerlink" title="js中有哪些数据类型"></a>js中有哪些数据类型</h2><p>int(数值), string(字符串), boolean(布尔), null(空), undefined(未定义), object(对象)</p>
<h2 id="typeof-typeof-和instanceof-的区别"><a href="#typeof-typeof-和instanceof-的区别" class="headerlink" title="typeof(typeof()) 和instanceof 的区别?"></a>typeof(typeof()) 和instanceof 的区别?</h2><p>typeof可以判断变量的数据类型, 返回值是字符串;<br>a instanceof b是判断b是不是在a的原型链上, 也可以实现判断数据类型, 返回值为布尔.</p>
<h2 id="怎么判断两个对象相等"><a href="#怎么判断两个对象相等" class="headerlink" title="怎么判断两个对象相等?"></a>怎么判断两个对象相等?</h2><p>先判断俩者是不是对象;<br>再判断俩个对象的所有key值是否相等相同;<br>最后判断俩个对象的相应的key对应的值是否相同</p>
<h2 id="js中函数有哪些定义方式"><a href="#js中函数有哪些定义方式" class="headerlink" title="js中函数有哪些定义方式"></a>js中函数有哪些定义方式</h2><p>函数声明:function fn(){}<br>函数表达式:var fn=function(){}<br>构造函数:var fn=new Function(‘参数1’, ’参数2’, ’函数体’)</p>
<h2 id="js中函数有哪些调用形式"><a href="#js中函数有哪些调用形式" class="headerlink" title="js中函数有哪些调用形式?"></a>js中函数有哪些调用形式?</h2><p>普通函数, 对象的方法, 事件处理函数, 构造函数, 回调函数</p>
<h2 id="“-”-和-“-”-的区别？"><a href="#“-”-和-“-”-的区别？" class="headerlink" title="“==” 和 “===” 的区别？"></a>“==” 和 “===” 的区别？</h2><p>==只会对值进行比较, ===不仅会对值进行比较, 还会对数据类型进行比较.</p>
<h2 id="js中的常用内置对象有哪些？并列举该对象的常用方法？"><a href="#js中的常用内置对象有哪些？并列举该对象的常用方法？" class="headerlink" title="js中的常用内置对象有哪些？并列举该对象的常用方法？"></a>js中的常用内置对象有哪些？并列举该对象的常用方法？</h2><p>Math(数学相关); Date(日期相关); Array; Object</p>
<h2 id="列举和数组操作相关的方法"><a href="#列举和数组操作相关的方法" class="headerlink" title="列举和数组操作相关的方法"></a>列举和数组操作相关的方法</h2><p>push: 将元素添加到数组的末尾, 返回值是数组长度<br>pop: 将数组最后一个元素弹出, 返回值是被弹出的元素<br>unshift: 在数组的开头插入一个元素, 返回值是数组的长度<br>shift: 将数组第一个元素弹出, 返回值是被弹出的元素<br>splice(index, len): 删除数组中指定元素<br>concat: 连接数组<br>reverse: 翻转数组</p>
<h2 id="列举和字符串操相关的方法"><a href="#列举和字符串操相关的方法" class="headerlink" title="列举和字符串操相关的方法"></a>列举和字符串操相关的方法</h2><p>substr(start, len)/substring(start, end): 截取字符串<br>slice: 从数组会字符串中截取一段<br>indexOf/lastIndexOf: 查找某一个字符是否存在于另外一个字符串中, 存在则返回索引, 不存在则返回-1; indexOf是从前向后顺序查找;<br>lastIndexOf: 是从后向前查找<br>replace: 替换字符串特定的字符<br>toUpperCase: 将字符串转成大写<br>toLowerCase: 将字符串转成小写<br>charAt: 获取字符串中指定索引的字符</p>
<h2 id="document-write和-innerHTML的区别"><a href="#document-write和-innerHTML的区别" class="headerlink" title="document.write和 innerHTML的区别?"></a>document.write和 innerHTML的区别?</h2><p>document.write是指定在整个页面区域的内容, innerHTML是指定某一个元素的内容.</p>
<h2 id="分别阐述split-slice-splice-join-？"><a href="#分别阐述split-slice-splice-join-？" class="headerlink" title="分别阐述split(), slice(), splice(), join()？"></a>分别阐述split(), slice(), splice(), join()？</h2><p>split可以使用一个字符串切割另外一个字符串, 返回值是数组;<br>slice可以从数组中截取一部分(字符串对象也有slice方法);<br>splice(index, len)可以删除指定的数组元素;<br>join可以将数组元素使用特定的连接符拼接成字符串</p>
<h2 id="例举-3-中强制类型转换和-2-中隐式类型转换？"><a href="#例举-3-中强制类型转换和-2-中隐式类型转换？" class="headerlink" title="例举 3 中强制类型转换和 2 中隐式类型转换？"></a>例举 3 中强制类型转换和 2 中隐式类型转换？</h2><p>强制转换:<br>转化成字符串 toString() String() 转换成数字 Number()、 parseInt()、 parseFloat();<br>隐式转换:<br>转换成布尔类型 Boolean() 隐式拼接字符串<br>例子 var str = “” + - / % ===</p>
<h2 id="如何判断一个变量foo是数组"><a href="#如何判断一个变量foo是数组" class="headerlink" title="如何判断一个变量foo是数组?"></a>如何判断一个变量foo是数组?</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js">foo <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>;<br>foo.constructor == <span class="hljs-built_in">Array</span>;<br><span class="hljs-built_in">Array</span>.isArray(foo)<br><span class="hljs-built_in">Object</span>.prototype.toString.call(foo) == <span class="hljs-string">"[object Array]"</span><br></code></pre></td></tr></table></figure>

<p>Javascript高级</p>
<h2 id="什么是原型对象"><a href="#什么是原型对象" class="headerlink" title="什么是原型对象?"></a>什么是原型对象?</h2><p>每一个构造函数都有一个prototype的属性, 这个属性的值是一个对象, 这个对象就叫做构造函数的原型对象; 一般建议将构造函数的成员属性绑定在原型对象prototype上, 因为原型对象prototype<br>身上的属性默认可以通过实例对象访问到; 这样做可以保证在每次通过new关键字创建实例对象的时候, 这些方法不会被重复在内存中创建.</p>
<h2 id="什么是原型链"><a href="#什么是原型链" class="headerlink" title="什么是原型链?"></a>什么是原型链?</h2><p>每个构造函数都有一个prototype属性, 即原型对象, 通过实例对象的<strong><em>proto</em></strong>属性也可访问原型对象; 而原型对象本质也是一个对象, 是对象就有自己的原型对象, 最终形成的链状的结构称为原型链.</p>
<h2 id="什么是构造函数"><a href="#什么是构造函数" class="headerlink" title="什么是构造函数?"></a>什么是构造函数?</h2><p>构造函数本质也是一个函数, 只不过这个函数在定义的时候首字母一般需要大写; 构造函数调用的时候, 必须通过一个new关键字来调用; 我们一般不直接使用构造函数, 而是使用构造函数创建出来的实例对象. 构造函数是js面向对象的一个重要组成部分.</p>
<h2 id="js中实现继承的方式"><a href="#js中实现继承的方式" class="headerlink" title="js中实现继承的方式?"></a>js中实现继承的方式?</h2><p>ES6之前官方并没有提供一种实现继承的语法, 所以大部分继承方式都是程序员通过代码在模拟. 常见的继承方式有以下几种:<br>原型继承;<br>借用构造函数继承;<br>组合继承; </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name, age, gender</span>) </span>&#123;<br>    <span class="hljs-keyword">this</span>.name = name || <span class="hljs-string">''</span>;<br>    <span class="hljs-keyword">this</span>.age = age || <span class="hljs-string">''</span>;<br>    <span class="hljs-keyword">this</span>.gender = gender || <span class="hljs-string">''</span>;<br>&#125;<br>Person.prototype.sayHi = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'I am '</span> + <span class="hljs-keyword">this</span>.name);<br>&#125;<br><span class="hljs-keyword">var</span> p1 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">'zs'</span>, <span class="hljs-number">30</span>, <span class="hljs-string">'男'</span>);<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">name, age, gender, score</span>) </span>&#123;<br>    <span class="hljs-comment">/*  通过构造继承属性 */</span><br>    Person.call(<span class="hljs-keyword">this</span>, name, age, gender);<br>&#125;<br><br><span class="hljs-comment">/*  通过原型继承,继承方法 */</span><br>Student.prototype = <span class="hljs-keyword">new</span> Person();<br><span class="hljs-comment">/*  修改constructor的指向 */</span><br>Student.prototype.constructor = Student;<br><span class="hljs-comment">/*  动态添加成员方法 */</span><br>Student.prototype.printScore = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'my score is '</span> + <span class="hljs-keyword">this</span>.score);<br>&#125;<br><span class="hljs-comment">/*  创建Student实例对象 */</span><br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">'zs'</span>, <span class="hljs-number">30</span>, <span class="hljs-string">'男'</span>, <span class="hljs-number">90</span>);<br>ssayHi();<br>sprintScore();<br></code></pre></td></tr></table></figure>

<p>ES6之后使用extends关键字实现继承(class Student extends Person{})</p>
<h2 id="什么是闭包-有什么作用-使用的时候需要注意什么"><a href="#什么是闭包-有什么作用-使用的时候需要注意什么" class="headerlink" title="什么是闭包, 有什么作用, 使用的时候需要注意什么?"></a>什么是闭包, 有什么作用, 使用的时候需要注意什么?</h2><p>闭包是一个跟函数相关的概念, 表现形式是一个父函数内部, 嵌套了一个子函数, 子函数直接或间接的被返回给外部作用域, 并且子函数中会使用到父函数局部作用域中的变量. 当我们在外部调用这个子函数的时候, 就会发生闭包现象.<br>闭包的作用: 闭包可以延展一个函数的作用域<br>注意事项: 不能滥用闭包, 会导致内存泄漏</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fn</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">100</span>;<br>    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> a;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">var</span> fn1 = fn();<br>fn1();<br></code></pre></td></tr></table></figure>

<h2 id="什么是内存泄漏-那些操作会引起内存泄漏"><a href="#什么是内存泄漏-那些操作会引起内存泄漏" class="headerlink" title="什么是内存泄漏, 那些操作会引起内存泄漏?"></a>什么是内存泄漏, 那些操作会引起内存泄漏?</h2><p>内存泄漏是指本应该被垃圾回收机制回收的内存空间由于某种特殊原因没有及时被回收, 称之为内存泄漏. 滥用全局变量和滥用闭包都会导致内存泄漏.</p>
<h2 id="什么是预解析"><a href="#什么是预解析" class="headerlink" title="什么是预解析?"></a>什么是预解析?</h2><p>JS代码在执行之前, 解析引擎会对代码进行一个预先的检查, 主要会对变量和函数的声明进行提升, 将变量和函数的声明提到代码的最前面. 变量只提升声明, 不提升赋值.</p>
<h2 id="说说你对this关键字的理解"><a href="#说说你对this关键字的理解" class="headerlink" title="说说你对this关键字的理解"></a>说说你对this关键字的理解</h2><p>this在不同的场景下指向不太一样, 主要分为一下几种情况:<br>普通函数中指向全局window;<br>对象的成员方法中指向该方法的宿主对象;<br>构造函数中指向new出来的实例对象;<br>事件处理函数中指向事件源;<br>回调函数中指向全局window</p>
<h2 id="call-apply-bind的区别"><a href="#call-apply-bind的区别" class="headerlink" title="call/apply/bind的区别"></a>call/apply/bind的区别</h2><p>这三个方法都是函数这个特殊对象的方法, 通过这三个方法都可以改变函数内部this的指向.<br>不同点:<br>call和apply会调用一次函数, 而bind不会调用函数, 只会在内存中创建一个函数的副本(修改过this指向的函数).<br>call从第二个参数开始需要一个参数列表,<br>apply第二个参数需要是一个数组</p>
<h2 id="caller和callee的区别是什么"><a href="#caller和callee的区别是什么" class="headerlink" title="caller和callee的区别是什么?"></a>caller和callee的区别是什么?</h2><p>函数fun.caller返回调用fun的函数对象，即fun的执行环境，如果fun的执行环境为window则返回null;<br>Callee是函数的arguments这个特殊对象的一个属性, 指向函数本身.</p>
<h2 id="new操作符具体干了什么呢"><a href="#new操作符具体干了什么呢" class="headerlink" title="new操作符具体干了什么呢?"></a>new操作符具体干了什么呢?</h2><p>第一步创建一个空对象;<br>第二步将this指向空对象;<br>第三步动态给刚创建的对象添加成员属性;<br>第四步隐式返回this</p>

      
       <hr><span style="font-style: italic;color: gray;"> 请你也把我遗弃在远方, 让我享受这可怕的绝望, 当你终于感到了悲伤, 我在回来为你歌唱 </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>




    <div id="comments"></div>
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">

<script src="/js/gitment.js"></script>

<script>
    var gitment = new Gitment({
        id: 'http://blog.duans.top/2020/03/24/client/javascript/', // 可选。默认为 location.href
        owner: 'duanshaobo',
        repo: 'blog.duans.top',
        oauth: {
            client_id: '76fd9510b156417889ed',
            client_secret: 'c63458b7f62b1b672250331443a554f3e8be05b3',
        },
    })
    gitment.render('comments')
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">Copyright©2020 www.duans.top</p>
<!-- <p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p> -->

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['@duans','@duans','#vue','#前端基础','#react','#minapp','#javascript','#angular','#mongodb','#jquery','#nginx','#mysql','#apache','#webapi','#性能优化','#ajax','#html5','#css3','#es6','#es7','#es8','#代码分析','#js基础','#构建工具','#混合app','#混合开发','#webSocket',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 582px;
    }
    .nav.fullscreen {
        margin-left: -582px;
    }
    .nav-left {
        width: 160px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 532px;
        }
        .nav.fullscreen {
            margin-left: -532px;
        }
        .nav-left {
            width: 140px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 532px;
            margin-left: -532px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 532px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        background: url("/img/article-list-background-1.jpg");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
    .post .pjax article :not(pre) > code {
        color: #24292e;
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
        font-size: 85%;
        margin: 0;
        padding: .2em .4em;
    }
    
</style>







</html>
